<template>
	<view class="zaiui-login-content">
		 
		<u-navbar title="填写验证码" :autoBack="true"></u-navbar>
		
		<view class="logo-view">
			<image class="logo" :src="configInfo.logo" mode="widthFix"></image>
		</view>
		<view class="content">
			<view class="title-h">验证</view>
			<view class="introduce">
				<text class="tap" @tap="smsCodeHttp" v-if="!state">重新获取验证码</text>
				<text v-else>{{currentTime}}s 后可重新获取验证码</text>
			</view>
			<view class="zaiui-flex-view checking-view" @tap="showNumLockTap">
				<view class="flex-sub text-center">{{codeKey[0]}}</view>
				<view class="flex-sub text-center">{{codeKey[1]}}</view>
				<view class="flex-sub text-center">{{codeKey[2]}}</view>
				<view class="flex-sub text-center">{{codeKey[3]}}</view>
				<view class="flex-sub text-center">{{codeKey[4]}}</view>
				<view class="flex-sub text-center">{{codeKey[5]}}</view>
			</view>
			<!-- <view class="right-tip-view">
				<text>收不到验证码？</text>
				<text class="tap">使用语音验证</text>
			</view> -->
		</view>
		<view class="foot-view" v-if="!NumLock" >
			<view class="zaiui-btn-view">
				<button class="zaiui-btn" @tap="goRegiterHttp" v-if="type==1" >立即注册</button>
				<button class="zaiui-btn" @tap="goPhoneLoginHttp" v-if="type==2">立即登录</button>
			</view>
			<view class="font-tag-view">
				<text class="font-tag" @tap="tapLogin">密码登录</text>
				<text class="font-tag"  @tap="tapRegiter">账号注册</text>
			</view>
		</view>
		
		<!--数字键盘-->
		<view class="num-lock-view" v-else :class="NumLock?'show':''">
			<view class="num-lock-head">
				<view class="title" v-if="codeBak == ''">安全数字键盘</view>
				<view class="code-bak-view" v-else>
					<text class="code-text" @tap="codeBakTap">使用: {{codeBak}} </text>
					<text class="cuIcon-close close-icon" @tap="codeBakCloseTap"/>
				</view>
				<text class="close" @tap="closeNumLockTap">关闭</text>
			</view>
			<view class="key-grid-list">
				<block v-for="(item,index) in 9" :key="index">
					<view class="key-item" @tap="codeKeyTap(item+1)">
						<text class="num">{{item+1}}</text>
					</view>
				</block>
				<view class="key-item">
					<text class="num"/>
				</view>
				<view class="key-item" @tap="codeKeyTap(0)">
					<text class="num">0</text>
				</view>
				<view class="key-item" @tap="codeKeyDelTap">
					<text class="cuIcon-close close"/>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {configInfo} from '@/common/utils.js'
	import {smsCode,accountRegister,phoneLogin} from '@/common/http/api.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				configInfo,
				state: false,		//是否开启倒计时
				totalTime: 120,		//总时间，单位秒
				recordingTime: 0, 	//记录时间变量
				currentTime: 0, 	//显示时间变量
				codeKey: [], 
				NumLock: false, 
				codeBak: '',
				form:{},
				type:1
				
			}
		},
		onLoad(res) {
			this.form={};
			this.type=0;
			console.log(JSON.stringify(res))
			this.type=res.type;
			this.form=JSON.parse(res.form);
			this.smsCodeHttp();
		},
		computed: {
			...mapState(['userInfo', 'hasLogin']),
		},
		onShow() {
			
			// uni.getClipboardData({
			// 	success: res => {
			// 		this.codeBak = res.data;
			// 	}
			// });
		},
		methods: {
			...mapMutations(['login']),
			tapRegiter(){
				uni.navigateTo({
					url: '/pages_Me/login/register'
				});
			},
			checking() {
				//把显示时间设为总时间
				this.currentTime = this.totalTime;
				//开始倒计时
				this.state = true;
				//执行倒计时
				this.checkingTime();
			},
			//执行倒计时
			checkingTime(){
				let that = this;
				//判断是否开启
				if(this.state) {
					//判断显示时间是否已到0，判断记录时间是否已到总时间
					if(this.currentTime > 0 && this.recordingTime <= this.totalTime){
						//记录时间增加 1
						this.recordingTime = this.recordingTime + 1;
						//显示时间，用总时间 - 记录时间
						this.currentTime = this.totalTime - this.recordingTime;
						//1秒钟后，再次执行本方法
						setTimeout(() => { 	
							//定时器内，this指向外部，找不到vue的方法，所以，需要用that变量。
							that.checkingTime();
						}, 1000)
					} else {
						//时间已完成，还原相关变量
						this.state = false;		//关闭倒计时
						this.recordingTime = 0;	//记录时间为0
						this.currentTime = this.totalTime;	//显示时间为总时间
					}
				} else {
					//倒计时未开启，初始化默认变量
					this.state = false;
					this.recordingTime = 0;
					this.currentTime = this.totalTime;
				}
			},
			tapLogin() {
				uni.navigateTo({
					url: '/pages_Me/login/login'
				});
			},
			showNumLockTap() {
				this.NumLock = true;
			},
			codeKeyTap (index) {
				if(this.codeKey.length < 6) {
					this.codeKey.push(index);
				}
			},
			codeKeyDelTap() {
				this.codeKey.pop();
			},
			closeNumLockTap() {
				this.NumLock = false;
			},
			codeBakTap() {
				let str = this.codeBak;
				let arr = [];
				for (let i = 0; i < str.length; i++) { 
					let nstr = str.slice(i,i+1);
					arr.push(nstr);
				}
				this.codeKey = arr;
				this.codeBak = '';
			},
			codeBakCloseTap() {
				this.codeBak = '';
			},
			//获取短信
			smsCodeHttp(){
				smsCode({"phone":this.form.phone,"type":this.type}).then(res => {
					this.$ut.msg("短信已发!");
					this.checking();
				}).catch(e => {
					console.log(e)
					this.$ut.msg(e.msg)
				});
			},
			//进行注册
			goRegiterHttp(){
				if(this.codeKey.length!=6){
					this.$ut.msg("请输入验证码!")
					return false;
				}
				this.form.smsCode=this.codeKey[0]+''+this.codeKey[1]+''+this.codeKey[2]+''+this.codeKey[3]+''+this.codeKey[4]+''+this.codeKey[5];
				accountRegister(this.form).then(res => {
					this.login(res.data)
					this.$ut.msg("注册成功,!");
					this.form={};
					this.type=0;
					setTimeout(()=>{
						uni.$u.route({
							url: 'pages/index/index',
							type:'redirectTo'
						})
					},1200)
				}).catch(e => {
					this.$ut.msg(e)
				});
			}, 
			
			//进行登录
			goPhoneLoginHttp(){
				if(this.codeKey.length!=6){
					this.$ut.msg("请输入验证码!")
					return false;
				}
				this.form.smsCode=this.codeKey[0]+''+this.codeKey[1]+''+this.codeKey[2]+''+this.codeKey[3]+''+this.codeKey[4]+''+this.codeKey[5];
				phoneLogin(this.form).then(res => {
					this.login(res)
					this.$ut.msg("登录成功!");
					this.form={};
					this.type=0;
					setTimeout(() => {
						uni.$u.route({
							url: 'pages/index/index',
							type:'redirectTo'
						})
					}, 1200)
				}).catch(e => {
					this.$ut.msg(e)
				});
			}
			
		}
	}
</script>

<style lang="less">
page{
	min-height: 100vh;
	min-width: 100%;
}
.zaiui-login-content {
	position: relative;
	color: #2B2C2D;
	.text-center {
		text-align: center;
	}
	.logo-view { 
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 30vh;
		.logo {
			width: 80px;
			height: 80px;
			margin-left: auto;
			margin-right: auto;
			margin-top: 100px;
			
		}
	}
	.content {
		position: relative;
		padding: 0 36.36rpx;
		.title-h {
			font-size: 45.45rpx;
		}
		.introduce {
			color: #909192;
			font-size: 25.45rpx;
			margin: 9.09rpx 0 36.36rpx;
			.tap {
				color: #75A9C2;
			}
		}
		.zaiui-flex-view {
			display: flex;
			.flex-sub {
				flex: 1;
				color: #2B2C2D;
				padding: 18.18rpx 0;
				border-bottom: 1.81rpx solid #EBECED;
				height: 52.72rpx;
			}
			.flex-sub + .flex-sub{
				margin-left: 36.36rpx;
			}
		}
		.phone-input {
			height: 40px;
		    color: #2B2C2D;
		    // padding: 18.18rpx 0;
		    border-bottom: 1.81rpx solid #EBECED;
			.input-placeholder {
				color: #909192;
				font-size: 29.09rpx;
			}
		}
		.phone-input + .phone-input {
			margin-top: 36.36rpx;
		}
		.checking-view {
			.phone-input {
				font-size: 32.72rpx;
			}
		}
		.right-tip-view {
			color: #c1c1c1;
			font-size: 25.45rpx;
			text-align: right;
			margin-top: 18.18rpx;
			.tap {
				color: #75A9C2;
			}
		}
	}
	.zaiui-btn {
		position: relative;
		border: 0;
		width: 100%;
		color: #ffffff;
		line-height: 1;
		height: 81.81rpx;
		padding: 0 29.09rpx;
		font-size: 27.27rpx;
		text-align: center;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0, 0);
		margin-right: initial;
		border-radius: 654.54rpx;
		background-color: #FF776D;
		&:after {
			display: none;
		}
	}
	.zaiui-btn.button-hover {
		transform: translate(1rpx, 1rpx);
	}
	.foot-view {
		width: 100%;
		position: fixed;
		bottom: 63.63rpx;
		.zaiui-btn-view {
			padding: 0 36.36rpx;
		}
		.font-tag-view {
			position: relative;
			text-align: center;
			margin-top: 20px;
			width: 100%;
			.font-tag {
				position: relative;
				color: #c1c1c1;
				font-size: 25.45rpx;
			}
			.font-tag + .font-tag {
				margin-left: 63.63rpx;
				&:after {
					content: " ";
					display: block;
					width: 2rpx;
					height: 100%;
					top: 0;
					left: -31.81rpx;
					position: absolute;
					background: #c1c1c1;
					transform: scale(0.5);
					box-sizing: border-box;
					pointer-events: none;
				}
			}
		}
	}
}

.num-lock-view {
	position: fixed;
	width: 100%;
	bottom: 0;
	background-color: #ffffff;
	color: #666666;
	margin-bottom: -2rpx;
	opacity: 0;
	z-index: 99999;
	transition: all 0.3s ease-in-out 0s;
	.num-lock-head {
		background-color: #ffffff;
		color: #666666;
		position: relative;
		font-size: 27.27rpx;
		height: 81.81rpx;
		line-height: 81.81rpx;
		box-shadow: 0 -3.63rpx 9.09rpx rgba(0, 0, 0, 0.05);
		.title {
		    color: #333333;
		    text-align: center;	
		}
		.close {
		    position: absolute;
		    right: 36.36rpx;
		    top: 0;	
		}
		.code-bak-view {
			position: relative;
			text-align: center;
			color: #333333;
			.code-text {
				background: #f1f1f1;
			    padding: 9.09rpx 18.18rpx;
			    border-radius: 90.9rpx;
			}
			.close-icon {
				position: relative;
				font-size: 32.72rpx;
			    margin-left: 25.45rpx;	
			}
		}
	}
	.key-grid-list {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		.key-item {
			position: relative;
			display: flex;
			padding: 20rpx 0 29.09rpx;
			width: 33.33%;
			transition-duration: 0s;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			flex-direction: column;
			&:after {
			    position: absolute;
			    top: 0;
			    left: 0;
			    -webkit-box-sizing: border-box;
			    box-sizing: border-box;
			    width: 200%;
			    height: 200%;
			    border-right: 2rpx solid rgba(0, 0, 0, .1);
			    border-bottom: 2rpx solid rgba(0, 0, 0, .1);
			    -webkit-border-radius: inherit;
			    border-radius: inherit;
			    content: " ";
			    -webkit-transform: scale(.5);
			    transform: scale(.5);
			    -webkit-transform-origin: 0 0;
			    transform-origin: 0 0;
			    pointer-events: none;
			}
			&:nth-child(3n):after {
				border-right-width: 0;
			}
			.num {
				font-size: 40rpx;
			    color: inherit;	
			}
			.close {
				font-size: 32.72rpx;
				margin-top: 9.09rpx;
			}
		}
	}
}
.num-lock-view.show {
	opacity: 1;
	
}

</style>
